<template>
    <div>
        <van-tabbar v-model="active" @change="changeItem" active-color="green" 
        inactive-color="#000">
            <van-tabbar-item >
                <van-icon slot="icon" class-prefix="iconfont icon-home" size="1rem"/>
                <span>首页</span>
            </van-tabbar-item>
            <van-tabbar-item >
                <van-icon slot="icon" class-prefix="iconfont icon-fenlei" size="1rem"/>
                <span>分类</span>
            </van-tabbar-item>
            <van-tabbar-item >
                <van-icon slot="icon" class-prefix="iconfont icon-cart" size="1.1rem"/>
                <span>购物车</span>
            </van-tabbar-item>
            <van-tabbar-item>
                <van-icon slot="icon" class-prefix="iconfont icon-center" size="1.3rem"/>
                <span>我的易果</span>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
    // 引入icon
    import "@/assets/iconfont/iconfont.css"
    // 引入vant组件
    import Vue from 'vue';
    import {
        Tabbar,
        TabbarItem,
        Icon,
    } from 'vant';

    Vue.use(Tabbar);
    Vue.use(TabbarItem);
    Vue.use(Icon);
    export default {
        data() {
            return {
                active:0,
                urls:["/home","/classify","/cart","/center","/detail"]
            }
        },
        created(){
            this.active = this.urls.indexOf(this.$route.path)
        },
        methods:{
            changeItem(index){
               this.$router.push(this.urls[index]) 
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>